iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0

今天我們來看 Routing 路由的部分

Routing

在 Client-Side-Rendering (CSR) 的開發中
沒了路由,就像是斷了腿的跑者
由此可見,路由扮演了一個很重要的角色

在 React 中,我們最常使用「react-router-dom」,這個套件進行 React 的路由管理
藉由切換不同路徑,顯示對應的頁面或元件

在此專案也是使用 react-router-dom

react-router-dom

在 react-router-dom 裡面提供很多元件
以下簡單介紹幾個常用的

  • Router
    分為「HashRouter」和「BrowserRouter」
    HashRouter 會在路徑前面加上「#」
    而在開發中比較常用到則是 BrowserRouter
  • Switch
    裡面包著Route,只用來顯示一個路由
  • Route
    控制路徑顯示對應的元件或是頁面
  • Link
    用於導向不同頁面的元件

專案中的應用


在 lodestar-app 中,是把路由包成一個名為「AppRouter」的元件來使用
被各個 Context 所包覆

首先我們在 AppRouter 中看到有一個「AppRouterContext」,它是用於封裝成一個 custom hook 給其他地方使用

接著是「BrowserRouter」,讓底下所有元件都能使用 router

再來是「QueryParamProvider」,用於各個頁面或是元件可以直接取用URL的參數

最重要的部分來了,AppPage
所有的頁面和元件都會呈現在此

其中比較特別的部分是「Suspense」和「fallback」
這兩個我之前都沒接觸過

Suspense 是 React 提供的特殊元件
當「目標載入元件」還沒載入完成時,React 會顯示 fallback 這個 props 綁定的「讀取元件」,一直到「目標載入元件」載入完成後再切換過來

最後我們看看 Route

它被 AppPage 包著,並且跑「routesMap」這個物件來生成路由


對比一個一個設定,是不是乾淨了許多?

明天我們繼續來看 type 的部分

參考文章

【Day.24】React效能 - 用lazy和Suspense來動態載入元件


上一篇
Naming (2) : variable
下一篇
type
系列文
從 Open Source 專案學習 React 開發 - 以 lodestar-app 為例30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言